<template>
    <div>
        <div class="container">
            <div class="tools">
                <el-button type="primary" @click="guideVisible = true">云管理账号指引</el-button>
                <el-button type="primary" @click="addVisible = true">添加账号</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column type="index" width="50" align="center"></el-table-column>
                <el-table-column prop="tenantName" label="API账号" align="center"></el-table-column>
                <el-table-column prop="domain" label="地址" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.domain}}.huaweicloud.com</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="modelId" label="绑定模板" align="center"></el-table-column> -->
                
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.status?'启用':'禁用'}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                         <el-button
                            size="mini"
                            @click="handleChange(scope.$index, scope.row)">{{scope.row.status?'禁用':'启用'}}</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            
        </div>
        <el-dialog title="新增云管理API账号" :visible.sync="addVisible" width="600px">
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="云管理API账号">
                    <el-input v-model="form.tenantName"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                     <el-input v-model="form.tenantPwd"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-select v-model="form.address" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.value"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    .huaweicloud.com
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="checkAPI">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="账号指引" width="600px"
            :visible.sync="guideVisible"
            >
            <img style="width: 100%;" src="https://cloudcampusapps.top/large_screen/img/guide.jpg" alt="">
        </el-dialog>

    </div>
</template>

<script>
import { showLoading, hideLoading } from '../../utils/loading';
export default {
    name: 'Application',
    data() {
        return {
            tableData: [],
            addVisible: false,
            guideVisible: false,
            options: [{
                value: 'naas'
            }, {
                value: 'naas1'
            }, {
                value: 'naas2'
            }, {
                value: 'naas3'
            },],
            form:{
                "address": "",
                "id": "",
                "tenantName": "",
                "tenantPwd": ""
            },
            fullscreenLoading: false
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            // showLoading();
            const u = '/screen/screenUser/findAllApi';
            this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
            .then((res)=>{
                if(res.data.code == 200){
                    this.tableData =  res.data.data;
                }else{
                    this.$message.error(res.data.msg);
                };
                hideLoading();
            }).catch((err)=>{
                console.log(err);
            });
        },
        handleChange(index,item) {
            showLoading();
            let u = '/screen/screenUser/enableAndDisable'
            this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')},params:{'domain':item.domain,'screen_user_id':item.id,'status':item.status?false:true}})
            .then((res)=>{
                if(res.data.code == 200){
                    this.$message.success(res.data.msg);
                    this.getData();
                }else{
                    this.$message.error(res.data.msg);
                };
                hideLoading();
            }).catch((err)=>{
                console.log(err);
            });
        },
        handleDelete(index,item) {
            this.$confirm('请确认是否真的删除', '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '删除',
                cancelButtonText: '取消'
            })
            .then(() => {
                showLoading();
                let u = '/screen/screenUser/deleteApiAccount?screen_id='+item.id
                this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
                .then((res)=>{
                    if(res.data.code == 200){
                        this.$message.success(res.data.msg);
                        this.getData();
                    }else{
                        this.$message.error(res.data.msg);
                    };
                    hideLoading();
                }).catch((err)=>{
                    console.log(err);
                });
            })
            .catch(action => {
               
            });
           
        },
        checkAPI() {
            this.addVisible = false;
            showLoading();
            let params = {
                "domain": this.form.address,
                "password": this.form.tenantPwd,
                "username": this.form.tenantName
            }
            const url = '/screen/screenUser/checkApiAccount';
            const headers = {
                'Content-Type': 'application/json;charset=UTF-8',
                'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')
            };
            this.$axios.post(url, params, {headers}).then((res) => {
                if(res.data.code == 200){
                    this.addAPI();
                }else{
                    this.$message.error(res.data.msg);
                };
                hideLoading();
            }).catch((error) => {
                console.warn(error);
            });
        },
        addAPI() {
            let params = {
                "domain": this.form.address,
                "tenantName": this.form.tenantName,
                "tenantPwd": this.form.tenantPwd,
            }
            const url = '/screen/screenUser/addApiAccount';
            const headers = {
                'Content-Type': 'application/json;charset=UTF-8',
                'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')
            };
            this.$axios.post(url, params, {headers}).then((res) => {
                hideLoading();
                if(res.data.code == 200){
                    this.$message.success(res.data.msg);
                    this.form={};
                    this.getData();
                }else{
                    this.$message.error(res.data.msg);
                };
            }).catch((error) => {
                console.warn(error);
            });
        }
    }
};
</script>
<style scoped lang="less">
.tools {
    width: 100%;
    margin-bottom: 10px;
    text-align: right;
}
.table {
    width: 100%;
    font-size: 14px;
}
</style>
